@charset "utf-8";
@function r($px) {
    @return $px/$fontsize*1rem;
}
@import "../_reset.scss";
$fontsize: 40;

html{
    position: relative;
//  overflow: hidden;
    font-size: 0;
}
#web{
    width: 100%;
    height: 100%;
    background: #bf0c21;
    font-family: "楷体""微软雅黑";
     background-image: url(../../img/set/bg1.png);
    background-size: 100% 100%;
    background-color: #BF0C21;
    position: absolute;
    overflow: scroll;
  } 
  .host{
      font-size: r(30);
      color: #e7c598;
      font-family: "宋体","微软雅黑";
      font-weight: bold;
      text-align: center;
      margin-top: r(27);
      i{
          font-weight: bold;
          font-style: normal;
          color: #FEFDFC;
          border-bottom: 1px solid #E7C598;
      }
  }
  .table{
      width:r(388);
      margin: 0 auto;
        margin-top: r(74);
  .table_Big{
      width: r(217);
      height: r(217);
      margin: 0 auto;
      margin-top: r(34);
      img{
          width: 100%;
          height: 100%;
         
      }
  }
  .sm_table{
      width: r(180);
      height: r(174);
      display: inline-block;
      text-align: center;
      position: relative;
//    margin-top: r(-10);
       span{
           display:inline-block;
//         text-align: center;
            margin: 0 auto;
            width:r(153);
            height: r(174);  
          img{
              width: 100%;
              height: 100%;
             }
          }
          p{
              font-size: r(22);
              color: #BF0C21;
              position: absolute;
              top: r(71);
              left: r(60);
          }
  }

  }
.footer_btn{
        width: r(318);
        height: r(45);
        margin: 0 auto;
        margin-bottom: r(38);
        margin-top: r(15);
        img{
            width: 100%;
            height: 100%;
        }
    }

.footer{
//  position: relative;
    position: absolute;
    width:100%;
    height: r(128);
    line-height: r(128);
    font-size: 0;
    bottom: 0;
    
    .footer_img{
        
        width: r(41);
        height: r(41);
        position: fixed;
        right: r(56);
        bottom: r(25);
        font-size: 0;
//      z-index: 9999;
        img{
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
    }
}
   #web2{
        width: 100%;
        height: 100%;
        font-family: "楷体""微软雅黑";
        background: rgba(0,0,0,.5);
        position: absolute;
        position: relative;
        top: 0;
        animation: opens 0.3s linear ;
//      display: none;
        
        .index_smallWin{
            width: r(413);
            height: r(250);
            background: #e7c598;
            border-radius: r(8);
            left: r(-999);
            right: r(-999);
            margin: 0 auto; 
            position: relative;
            position: absolute;
            top: r(353);
            animation: s2 0.7s linear;
        
        >a{
            display: block;
            width: r(35);
            height: r(35);
            position: absolute;
            top: r(10);
            right: r(15);
            >img{
                vertical-align: top;
               width: 100%;
               height: 100%; 
            }
            
        }
        p{
            color: #BF0C21;
            font-size: r(22);
            text-align: center;
            margin-top: r(34);
        }
       div:first-child{
            margin-top: r(11);
       }
       div:first-of-type{
           width: r(222);
           height: r(74);
           line-height: r(37);
           background: #BF0C21;
           color: #E7C598;
           margin: 0 auto;
           font-size: r(20);
//         line-height: r(50);
            margin-top: r(11);
            border-radius: r(8);
            text-align: center;
            a{
                width: 100%;
                height: 100%;
                color: #E7C598;
            }
       }
       div:nth-of-type(2){
           width: r(222);
           height: r(38);
           line-height: r(37);
           background: #BF0C21;
           color: #E7C598;
           margin: 0 auto;
           font-size: r(20);
//         line-height: r(50);
            margin-top: r(11);
            border-radius: r(8);
            text-align: center;
            a{
                width: 100%;
                height: 100%;
                color: #E7C598;
            }
       }
        
    }
   }

#web3{
        width: 100%;
        height: 100%;
        font-family: "楷体""微软雅黑";
        background-color: #BF0C21;
        background-image: url(../../img/set/bg1.png);
        background-size: 100% 100%;
        position: absolute;
        position: relative;
        top: 0;
        animation: s1 1s linear ;
        z-index: 99;
        display: none;

        .form{
           width: r(392);
           height: r(530);
           margin: 0 auto;
           text-align: center;
           padding-top: r(264);
           p{
               font-size: r(30);
               color: #E7C598;
          }
           input{
                 width: r(327);
                 height: r(37);
                 outline: none;
                 border: none;
                 color: #BF0C21;
                 border-radius: r(8);
                 background: #E7C598;
                 text-indent: r(19);
                  } 
              input::-webkit-input-placeholder{
                    color: #BF0C21;opacity:1;
                    font-size: r(22);
                }
               :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                    color: #BF0C21; opacity:1; 
                    font-size: r(22);
                }
                
                ::-moz-placeholder { /* Mozilla Firefox 19+ */
                    color: #BF0C21;opacity:1;
                     font-size: r(22);
                }
                
                input:-ms-input-placeholder{
                    color: #BF0C21;opacity:1;
                     font-size: r(22);
                }
          .form_text{
              width: r(376);
              height: r(73);
              margin: 0 auto;
              margin-top: r(26);
              img{
                  width: 100%;
                  height: 100%;
              }
          }
          .form_btn{
              width: r(250);
              height: r(45);
              margin: 0 auto;
              margin-top: r(25);
              background-color: transparent;
              outline: none;
              border: none;
              img{
                  width: 100%;
                  height: 100%;
              }
          }
        }
}
#web4{
        width: 100%;
        height: 100%;
        font-family: "楷体""微软雅黑";
        background: rgba(0,0,0,.5);
        position: absolute !important;
        position: relative;
        top: 0;
        display: none;
        
        .index_smallWin2{
            width: r(413);
            height: r(250);
            background: #e7c598;
            border-radius: r(8);
            left: r(-999);
            right: r(-999);
            margin: 0 auto; 
            position: relative;
            position: absolute;
            top: r(353);
            
        >a{
            display: block;
            width: r(35);
            height: r(35);
            position: absolute;
            top: r(10);
            right: r(15);
            >img{
               width: 100%;
               height: 100%; 
            }
            
        }
        p{
            font-size: r(40);
            font-weight: bold;
            color: #BF0C21;
            text-align: center;
            margin-top: r(84);
        }
      
       div{
           width: r(222);
           height: r(38);
           line-height: r(37);
           background: #BF0C21;
           color: #E7C598;
           margin: 0 auto;
           font-size: r(20);
//         line-height: r(50);
            margin-top: r(11);
            border-radius: r(8);
            text-align: center;
            a{
                width: 100%;
                height: 100%;
                color: #E7C598;
            }
       }
       
        
    }
   }
   #web5{
    width: 100%;
    height: 100%;
    background: #bf0c21;
    font-family: "宋体","微软雅黑";
    position: relative !important;
    position: absolute;
    overflow: scroll;
    display: none;
    background: url(../../img/index/bg.png) 100% 100%;
        
  } 
  .sort-tittle{
      width: r(318);
      height: r(45);
      margin: 0 auto;
      margin-top: r(41);
      img{
          width: 100%;
          height: 100%;
      }
  }
.tab{
      height: r(834);
      width: r(504);
      margin: 0 auto;
      overflow: scroll;
      border:  1px solid #E7C598;
      border-radius: r(2);

table{
      height: 100%;
      width: 100%;
      tr{
          border-bottom: 1px solid #E7C598;
          height: r(90);
          color: #fefdfc;
          td:first-child{
              width:r(90);
              height: 100%;
              text-align: center;
              line-height: r(90);
              font-size: r(25);
              font-weight: bold;
//            color: #fefdfc;
              
          }
          td:nth-child(2){
              width:r(63);
              height: 100%;
              text-align: center;
            img{
                width: r(63);
                height: r(63);
                vertical-align: middle;
            }
             
             
          }
           td:nth-child(3){
              width:r(188);
              height: 100%;
              text-align: left;
              text-indent: r(8);
              font-size: r(22);
              font-weight: bold;
//            color: #fefdfc;
              line-height: r(90);
              }
            td:last-child{
              width:r(155);
              height: 100%;
              text-align: center;
              font-size: r(25);
//            font-weight: bold;
//            color: #fefdfc;
              line-height: r(90);  
            }
        
      }
      tr:nth-child(1),tr:nth-child(2),tr:nth-child(3){
          color: #E7C598 !important;
      }
      tr:nth-child(1){
          background-image: url(../../img/sort/top1.png);
            background-repeat: no-repeat;
            background-position:r(30) r(10);
      }
      tr:nth-child(2){
          background-image: url(../../img/sort/top2.png);
            background-repeat: no-repeat;
            background-position:r(30) r(10);
      }
      tr:nth-child(3){
          background-image: url(../../img/sort/top3.png);
            background-repeat: no-repeat;
            background-position:r(30) r(10);
        }
        }
    }
    .bg{
        background: #E7C598;
        color: #BF0C21 !important;
    }

@keyframes opens{
    0%{
        transform:scale(0);
//      transform-origin: top left; 
    }
    100%{
        transform: scale();
    }
}
